<template>
	<view class="content">
		<uni-nav-bar fixed="true" statusBar="true">
			<template v-slot:left>
				<uni-icons style="margin-right:80rpx;margin-left:26rpx;" type="arrowleft" size="22"
					@click="backPage" />
			</template>
			<template v-slot:default>我的关注</template>
			<template v-slot:right >
				<view class="rightText" v-if="!isshowCancel" @click="isDelete">批量删除</view>
				<view class="rightText" v-if="isshowCancel" @click="cancel2">取消</view>
			</template>
		</uni-nav-bar>

		<u-sticky bgColor="#fff">
		    <u-tabs  :list="items" lineWidth="67rpx" itemStyle="height: 100rpx; width:33%; padding:0;"  lineColor="#2F6DFE" :activeStyle="{color: '#2F6DFE',fontWeight: 'bold'}" @click="onClickItem"></u-tabs>
		</u-sticky>
		<view class="guanzhu-body">
			<view class="shoucang-kong" v-if="!newsList.length && status == 'noMore'">
				<image src="../../../static/img/kong_img.png" class="kong-img"></image>
				<view class="kong-text">您还没有关注哟~</view>
			</view>
			<view v-else-if="newsList.length" class="guanzhu-wrap">
				<view v-for="(item, index) in newsList" :key="index" class="news-item">
					<view class="company-cell">
						<!-- 业主单位复选框 -->
						<u-checkbox-group>
							<view class="col1" v-if="isshowCheckBox">
								<u-checkbox @change="(e)=>checkboxChange(e,newsList,item)" shape="circle"
									:checked="item.checked" :name="item.company">
								</u-checkbox>
							</view>
						</u-checkbox-group>
			
						<view class="company-tag" v-show="current == 2">业主</view>
						<view class="company-tag company-tag2" v-show="current == 5">供应</view>
						<view class="company-tag company-tag3" v-show="current == 1">代理</view>
						<view class="company-text" @longpress="longpress(item.company,newsList)" @touchend="touchend"
							@click="navToDetails(item.company)">
							<view class="company-name text-ellipsis">{{item.company}}</view>
							<view class="company-wz">发布于：{{item.time}}</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
		</view>
		<!-- 取消关注 -->
		<uni-popup ref="showtip" :type="type" :mask-click="false">
			<view class="uni-tip">
				<text class="uni-tip-content">您确定要删除所选项吗？</text>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="cancel('tip')">取消</text>
					<view class="uni-tip-button">
						<text class="uni-tip-button" @click="queding" style="color: #0099ff;">确定</text>
					</view>
				</view>
			</view>
		</uni-popup>

		<view class="delete" v-if="!isshowCancel">
			<text @click="isDelete">批量删除</text>
		</view>
		<view class="quxiao" v-if="isshowCancel" @click="cancel2">取消</view>

		<!-- 批量删除底部按钮 -->
		<view v-if="isshowCancel" class="footer-btn">
			<u-checkbox-group>
				<view>
					<u-checkbox shape="circle" :checked="qxboxValue" @change="radioChange">
						全选
					</u-checkbox>
				</view>
			</u-checkbox-group>

			<u-button type="primary" @click="quxiaoguanzhu">删除</u-button>
		</view>
	</view>
</template>
<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniLoadMore,
			tabControl,
			uniPopup
		},
		data() {
			return {
				qxboxValue: false,
				// 是否显示取消按钮
				isshowCancel: false,
				// 是否显示复选框
				isshowCheckBox: false,
				companys: [],
				// deletes: "批量删除",
				tabHeight: 50,
				items: [
					{
						name:'业主单位'
					},
					{
						name:'供应商'
					},
					{
						name:'招标代理'
					}
				],
				current: 2,
				keys: "",
				color: "#FD463E",
				weight: true,
				pagesize: 10,
				newsList: [],
				xiangmuList: [],
				// areas: '',
				types: '',
				time: 0,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				type: '',
				currentname: '',
				currenttype: 0,
				gongsiname: "",
				zbpage:1,
				yzpage:1,
				gyspage:1,
				ids:[]
			}
		},
		onLoad() {
			this.checkLogin(1);
			if (this.currUser.islogin)
				this.getList('refresh');
		},
		onPullDownRefresh() {
			this.getList("refresh");
		},
		onReachBottom() {
			this.getList('add');
		},
		onUnload() {
			uni.hideNavigationBarLoading(); //关闭加载动画
		},

		methods: {
			backPage() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e)
				const arr = [];
				// 2024.5.30 uview组件更新，e.value 去掉value
				if (e === true) {
					for (var i = 0; i < this.newsList.length; i++) {
						this.newsList[i].checked = true;
						arr.push(this.newsList[i].id)
					}
					// for (var i = 0; i < this.xiangmuList.length; i++) {
					// 	this.xiangmuList[i].checked = true;
					// 	arr.push(this.xiangmuList[i].company)
					// }
					console.log(arr)

					this.ids = arr;

				} else {
					for (var i = 0; i < this.newsList.length; i++) {
						this.newsList[i].checked = false;
					}
					// for (var i = 0; i < this.xiangmuList.length; i++) {
					// 	this.xiangmuList[i].checked = false;
					// }
					this.companys = [];
				}
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},

			isDelete() {
				this.isshowCheckBox = true;
				this.isshowCancel = true;
			},
			// 长按显示删除事件
			longpress(val, list) {
				this.isshowCheckBox = true;
				this.isshowCancel = true;
				// 选中长按的项
				list.map(item => {
					if (item.company === val) {
						item.checked = true;
						if (!this.companys.includes(val)) {
							this.companys.push(val)
						}
					}
				})

				// 判断点击是否最后一项，如果最后一项选中全选
				if ((this.companys.length === list.length) && (this.status === "noMore" || list.length < this.pagesize)) {
					this.qxboxValue = true;
				} else {
					this.qxboxValue = false;
				}
			},

			cancel2() {
				this.isshowCheckBox = false;
				this.isshowCancel = false;
				this.qxboxValue = false;
				this.companys = [];

				for (var i = 0; i < this.newsList.length; i++) {
					this.newsList[i].checked = false;
				}
				
			},

			// 选中某个复选框时，由checkbox时触发
			checkboxChange(param, list, c) {
				console.log('param', param);
				console.log("list", list)
				console.log("company", c)
				// 2024.5.30 uview组件更新，param.value 去掉value
				if (param) {
					//this.companys.push(c.company)
					this.ids.push(c.id)
				} else {
					this.companys = this.companys.filter(item => item !== c.company)
					this.ids = this.ids.filter(item => item !== c.id)
				}
				if (this.companys.length) {
					this.isshowCancel = true;
				} else {
					this.isshowCancel = true;
				}
				console.log(this.companys)

				// 判断点击是否最后一项，如果最后一项选中全选
				if ((this.companys.length === list.length) && (this.status === "noMore" || list.length < this.pagesize)) {
					this.qxboxValue = true;
				} else {
					this.qxboxValue = false;
				}
			},

			getList(type) {
				//type add 加载更多 refresh下拉刷新
				if (type == 'add') {
					if (this.status == "noMore") {
						return;
					}
					this.status = 'loading';
					
				}
				if (type === 'refresh') {
					this.status = 'loading';
					uni.showNavigationBarLoading();
					this.zbpage = 1
					this.yzpage = 1
					this.gyspage = 1
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 100
					});
				}
				let data = this.initNewData();
				data.from = 4038;
				data.location = 8088;
				data.type = this.current;
				data.pagesize = this.pagesize;
				data.zbpage = this.zbpage;
				data.yzpage = this.yzpage;
				data.gyspage = this.gyspage
				uni.request({
					url: this.baseConfig.serverURL + 'User/guanzhu/ListHandler.ashx',
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						uni.hideToast();
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								this.status = "noMore";
								uni.stopPullDownRefresh();
								uni.hideNavigationBarLoading(); //关闭加载动画
								return;
							} else {
								if (type === 'refresh') {
									console.log("下拉刷新");
									this.newsList = []; //刷新前清空数组
								}
								//获取成功，绑定
								let list = res.data.other2.list;
								if (list == undefined || list == '' || list.length <= 0) {
									this.status = "noMore";
									uni.stopPullDownRefresh();
									uni.hideNavigationBarLoading(); //关闭加载动画
									return;
								}

								list.forEach(item => {
									item.time = item.time.split('T')[0];
									this.$set(item, 'checked', false)
									this.newsList.push(item); 
								})
								this.status = "more";
								// if (list.length < this.pagesize) {
								// 	this.status = "noMore";
								// }
								if (this.current == 1){
									this.zbpage++;	
								}else if (this.current == 2){
									this.yzpage++;
								}else{
									this.gyspage++
								}
								uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
								uni.hideNavigationBarLoading();
							}
						} else {
							uni.showToast({
								title: '获取数据失败',
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '获取数据失败！',
							icon: "none"
						});
					}
				});
			},
			navToDetails(item) {
				if (this.islongPress === false) {
					let uri = encodeURIComponent(item);
					uni.navigateTo({
								url: '/pages/user/guanzhu/yezhu-detail/yezhu-detail?comname=' +
									encodeURIComponent(item) + '&type=' + this.current
							})
				}
			},

			touchend() {
				setTimeout(() => {
					this.islongPress = false;
				}, 200);
			},

			onClickItem(val) {
				if(val.index == 0){
					this.current = 2
				}else if(val.index == 1){
					this.current = 5
				}else{
					this.current = 1
				}
				this.newsList = []
				this.getList('refresh');

				// 切换时清空复选框的选中状态为false;this.companys等于空数组;隐藏顶部取消按钮和底部删除按钮,隐藏复选框
				for (var i = 0; i < this.newsList.length; i++) {
					this.newsList[i].checked = false;
				}
				this.isshowCancel = false;
				this.isshowCheckBox = false;
				this.qxboxValue = false;
				this.companys = [];

			},
			quxiaoguanzhu(param) {
				if (!this.isshowCheckBox) {
					this.isshowCheckBox = true;
					return;
				}
				if (this.ids.length === 0) {
					uni.showToast({
						title: "您未选择任何删除项，请选择",
						icon: "none"
					});
					return;
				}

				this.showtank();
			},
			showtank() {
				this.type = 'center';
				// this.$nextTick(() => {
					this.$refs['showtip'].open()
				// })
			},
			cancel(type) {
				this.$refs['show' + type].close()
			},
			queding(param) {
				this.isshowCancel = false;
				let comname, allCancel,comid;
				if (this.qxboxValue === true) {
					comname = '';
					comid = ''
					allCancel = '1';
				} else {
					comname = this.companys.join(",");
					comid = this.ids.join(',')
					allCancel = '0'
				}
				console.log(comname)
				let data = this.initNewData();
				data.from = 4038;
				data.location = 8088;
				data.comname = comname;
				data.allCancel = allCancel;
				data.type = this.current
				data.ids = comid
				uni.request({
					url: this.baseConfig.serverURL + 'user/guanzhu/GuanzhuHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						this.ids = [];
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
							} else {
								this.cancel('tip');
								this.isshowCancel = false;
								this.isshowCheckBox = false;
								this.ids = [];
								this.getList('refresh');
							}
						} else {
							// uni.showToast({
							// 	title: '获取失败',
							// 	icon: "none"
							// });
						}
					},
					fail: (res) => {
						// uni.showToast({
						// 	title: '获取失败！',
						// 	icon: "none"
						// });
					}
				})
			}
		}
	}
</script>

<style lang='scss'>
	@import "@/static/css/custom/choose.scss";

	page,
	.content {
		background-color: #FAFAFA;
	}
	

	.u-radio-group {
		display: inline-flex;
		flex-wrap: wrap;
		font-size: 27px;
		margin-top: 10px;
		margin-left: 21px;
	}

	.delete {
		position: absolute;
		left: 78%;
		/* top: -48%; */
		top: -4.2%;
		z-index: 9999;
		color: #0099ff;
	}

	.quxiao {
		position: absolute;
		left: 81%;
		/* top: -48%; */
		top: -4.2%;
		z-index: 9999;
		color: #0099ff;
	}

	.shanchu-btn button {
		width: 50px;
		height: 20px;
		background-color: #0099ff;
	}

	.footer-btn {
		width: 100%;
		/* height: 97rpx; */
		background-color: #fff;
		/* top: 94%; */
		bottom: 0;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 4%;
		box-sizing: border-box;
		position: fixed;
		border-top: 1px solid #eee;
		padding: 2% 30rpx;
		display: flex;
		align-items: center;
	}

	.footer-btn button {
		/* width: 19%; */
		height: 56rpx;
		/* margin-bottom: 3%; */
		line-height: 56rpx;
		margin-left: initial;
		margin-right: initial;
		padding: 0 4%;
	}

	.search-box {
		background-color: #5987e6;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 0rpx 15rpx;
		border-radius: 10rpx;
		width: 100%;
		height: 34px;

		.search-input {
			font-size: 24rpx;
			color: #fff;
			margin-left: 20rpx;
			width: 100%;
		}

		.search-logo {
			width: 143rpx;
			height: 26rpx;
		}
	}

	/* 顶部tabbar */
	.nav-bar {
		position: relative;
		z-index: 10;
		height: 90upx;
		white-space: nowrap;
		background-color: #2f69e0;

		.nav-item {
			display: inline-block;
			width: 150upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			font-size: 30upx;
			color: #fff;
			position: relative;

			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4upx solid #fff;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}

		.current {
			color: #fff;

			&:after {
				width: 50%;
			}
		}
	}

	.swiper-box {
		height: 100%;
	}

	.panel-scroll-box {
		height: 100%;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}



	.news-item {
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 24upx 30upx;
		border: 1px solid #E9E9EB;
		box-sizing: border-box;
		margin: 0rpx 20rpx 20rpx;
	}

	.company-cell {
		display: flex;
		flex-direction: row;
		align-items: center;

		.col1 {
			width: 64rpx;
			flex: none;
		}

		.company-tag {
			width: 86rpx;
			height: 86rpx;
			background: #E7F0FF;
			border-radius: 4rpx;
			font-size: 28rpx;
			color: #2F7FFF;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
		}
		.company-tag2{
			background: #FFEFEF;
			color: #FF6363;
		}
		.company-tag3{
			background: #E6FFEE;
			color: #04A93A;
		}

		.company-tag-zb {
			background-color: #ef1a18;
		}

		.company-text {
			overflow: hidden;
			flex: 1;
			.company-name {
				color: #333333;
				font-size: 30rpx;
				font-weight: 800;
			}

			.text-ellipsis {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.company-wz {
				color: #b7b7b7;
				font-size: 22rpx;
				margin-top:18rpx;
			}
		}

		.company-gz {
			width: 200rpx;
			height: 60rpx;
			border-radius: 50rpx;
			border: 1rpx solid #0099ff;
			color: #0099ff;
			font-size: 30rpx;
			text-align: center;
			line-height: 60rpx;
		}

		.company-gz-red {
			background-color: #ef1a18;
		}
	}

	.shoucang-kong {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 25%;
		width: 100%;

		.kong-img {
			width: 420rpx;
			height: 212rpx;
			margin: 50rpx 0;
		}

		.kong-text {
			color: #615f60;
			font-size: 28rpx;
		}

	}

	.zhaobiaodaili {
		width: 100rpx;
		height: 82rpx;
		flex: none;
		margin-right: 20rpx;
		position: relative;

		.zbdl-logo {
			width: 82rpx;
			height: 82rpx;
			border-radius: 10rpx;

		}

		.zbdl-level {
			background: url(../../../static/img/Vbg.png) no-repeat;
			width: 33rpx;
			height: 33rpx;
			background-size: 100% 100%;
			position: absolute;
			right: 0;
			bottom: 0;
			font-size: 24rpx;
			color: #fff;
			font-weight: 700;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.level-zi {
				width: 20rpx;
				height: 20rpx;

			}
		}
	}

	/* 提示窗口 */
	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px;
		width: 300px;
		background-color: #fff;
		border-radius: 10px;
		margin: 0 auto;
	}

	.uni-tip-title {
		margin-bottom: 10px;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}

	.uni-tip-content {
		font-size: 36rpx;
		color: #666;
		text-align: center;
		padding-top: 30rpx;
	}

	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		margin-top: 30px;
	}

	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 34rpx;
		color: #3b4144;
		padding: 15rpx 0;
	}

	.uni-tip-queren {
		color: #2F69E0;
	}

	.rightText {
		font-size: 32rpx;
		width: 160rpx;
		box-sizing: border-box;
		color: #366DE1;
		display: flex;
		text-align: right;
		justify-content: flex-end;
		margin-right: 30rpx;
	}

	
	.guanzhu-wrap{
		background-color: #fff;
		box-shadow: 0px 0px 10px 0px rgba(169,169,169,0.12);
		border-radius: 8px;
		margin: 0 20rpx;
		padding: 20rpx 0;
	}
	.guanzhu-body{
		margin-top: 28rpx;
	}
</style>

<style lang='scss' scoped>
	.content ::v-deep .uni-navbar__header-container{
		justify-content: center !important;
	}
	::v-deep .uni-navbar__header-btns {
		padding: 0;
		margin: 0;
		padding-right: 0;
		padding-left: 0 !important;
		margin-right: 0  !important;
	}
	
	::v-deep .uni-navbar__header-container {
		justify-content: space-between !important;
		width: 100%;
	
	} 
</style>